<template>
  <div class="page-mod">

    <scroll-view id="message" :scroll-top="scrollTop" :scroll-y="true" style="height:calc(100%)" class="content">
      <view class="scroll-view-content" height="100" :class="{ loading: chatStore.isLoading }">
        <!-- 消息列表chatList的长度--{{ chatList.length }} -->
        <ChatItem v-for="(chatItem, index) in chatList" v-bind="Object.assign(chatItem, { index })" :key="index">
        </ChatItem>
      </view>

    </scroll-view>

  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import ChatItem from './ChatItem'
import { fetchChatAPIProcess, getCategoryDetail, getsendAiCreate } from '@/api'
import { getToken } from '@/utils/auth';
import { useChatStore } from '@/store/modules/chat';
import { onLoad } from '@dcloudio/uni-app'

onMounted(async () => {
  const query = wx.createSelectorQuery();
  query.select(".content").boundingClientRect();
  query.select(".scroll-view-content").boundingClientRect();
  query.exec((res) => {
  });
})
const chatStore = useChatStore();


const chatList = computed(() => {
  return chatStore.chatList;
})
const isLoading = computed(() => {
  console.log('chatStore-isloading', chatStore.isLoading)
  return chatStore.isLoading;
})

function stopAnswer() {
  console.log('click-用户点击了停止更新')
  chatStore.stopAnswer();
}



onLoad(() => {
  if (chatList.value.length) {
    uni.setStorageSync('isFirstVisit', false)
  } else {
    uni.setStorageSync('isFirstVisit', true)
  }
})


// let chatList = ref([
// {
//   "id": "1",
//   "name": "小明",
//   "avatar": "/images/avatar.png",
//   "time": "2021.01.01 12:00:00",
//   "content": "你好，我是小明",
//   isAi: false,
// },
// {
//   "id": "2",
//   "name": "小红",
//   "avatar": "/images/avatar.png",
//   "time": "2021.01.01 12:00:00",
//   "content": "你好，我是小红",
//   isAi: true
// }
// ]);

</script>

<style lang="less" scoped>
.loading {
  padding-bottom: 5rem;
}

.stop-wrap {
  position: fixed;
  bottom: 100rpx;
  padding: 20rpx;
  /* left: 30%; */
  /* right: 30%; */
  width: 100%;
  z-index: 20;

  .stop-answer {
    width: 50%;

    margin: 0 auto;
    line-height: 2.5;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 28rpx;
    color: #666;
  }
}
</style>